<template>
	<view :style="'height:'+{height}+'px'">
		<view style="display: flex;padding: 20rpx;">
			<view style="flex: 1;">
			</view>
			<view class="navbar-right">
				<view class="button-mini" style="background: #00aaff;margin-right: 8rpx;" @click="submit2">全国</view>
				<view class="button-mini" @click="submit">确定</view>
			</view>
		</view>
		<view class="city-content">
			<view class="selected">
				<view v-if="selectVal.length>0" v-for="(item,index) in selectVal" :key="index">
					{{item}}
					<uni-icons @click="removeItem(item)" type="close" color="#e5e5e5"></uni-icons>
				</view>
			</view>
			<view class="content-box">
				<scroll-view scroll-y="true" style="height: 420px;" v-if="provices">
					<view class="content-left">
						<!-- :class="{'acitvieColor':index==selectDefalutNum}" -->
						<view v-for="(item,index) in provices" :key="index" class="city-name"
							:class="{'acitvieColor':index==selectDefalutNum}">
							<text @click="changeCity(index)"
								:class="{'acitvieColor':item.checked==true}">{{item.name}}</text>
							<!-- #ifdef MP-WEIXIN  -->
							<view @click="recordNum(item,index)">
								
								<checkbox-group  >
									<label>
										<checkbox :value="index" :checked="item.flag>0" />				
									</label>
								</checkbox-group>
							</view>
							<!--#endif -->
						
							<!--#ifdef APP-PLUS -->
							<image class="zb_icon"
								:src="item.checked==true?'/static/images/sel-s.png':'/static/images/sel-n.png'"
								@tap.stop="selectProvice1(item,index)"></image>
							<!--#endif -->
							<!--#ifdef H5 -->
							<image class="zb_icon"
								:src="item.checked==true?'/static/images/sel-s.png':'/static/images/sel-n.png'"
								@tap.stop="selectProvice1(item,index)"></image>
							<!--#endif -->
						</view>
					</view>
				</scroll-view>
				<scroll-view scroll-y="true" style="height: 380px;">
					<view class="content-right">
						<view v-for="(item, index) in belongingArea" :key="index" class="city-name"
							@click="checkboxChange(item,index)">
							<!-- <text :class="{'acitvieColor':item.checked==true}">{{item.areaName}}</text> -->
							<text :class="{'acitvieColor':item.checked==true}">{{item.name}}</text>
							<image class="zb_icon2"
								:src="item.checked==true?'/static/images/sel-s.png':'/static/images/sel-n.png'"></image>
						</view>
					</view>
				</scroll-view>
				<!-- <u-alert v-if="alterFlag>0" title="最多选择按个省份或城市哦"  type = "warning" :closable="true" ></u-alert> -->
			</view>
		</view>
		<u-toast ref="uToast"  />
	</view>

</template>

<script>
	const app = getApp();
	export default {
		props: {
			provices: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				alterFlag:0,
				belongingArea: [],
				isAllcheck: false,
				selectVal: [], //显示的数据,不是返回的数据
				selectDatas: {
					"provice": [],
					"city": []
				}, //返回的数据类型
				height: 0,
				// provices: provices,
				selectDefalutNum: 0, //默认选择第一个
				navBarHeight: app.globalData.navBarHeight,
				isSelectProvice: false, //是否选择省份
			}
		},
		beforeMount() {
			
			let datas= uni.getStorageSync("ADD_SELECTCITY")
			
			if (datas) {
			
				this.selectDatas = JSON.parse(uni.getStorageSync("ADD_SELECTCITY"))
				this.dealData(JSON.parse(uni.getStorageSync("ADD_SELECTCITY")))
				// 检查默认的是否全选了
				this.checkSelectType()
			} else {
				// this.defalutData()
				
			}
			this.initData()

		},
		watch: {},

		onLoad() {
			let that = this;
			// 获取系统信息
			wx.getSystemInfo({
				success: function(res) {
					// 获取可使用窗口宽度
					let clientHeight = res.windowHeight;
					// 设置高度
					that.setData({
						height: clientHeight - (that.navBarHeight + 8)
					});
				}
			})

		},
		created() {

		},
		mounted() {
			/*获取stroe数据  回显*/
			// for (let val of this.provices) {
			// 	val.checked = false
			// }

			
		},
		methods: {
			recordNum(item,index){
				console.log("=================",item,index)
				// this.provices[index].checked = !this.provices[index].checked
				if(!this.provices[index].checked){
					this.provices[index].checked = true
					this.provices[index].flag=1
				}else{
					this.provices[index].flag=0
					this.provices[index].checked = false
				}
				
				this.getAllselectVal()
			},
			
			
			// 初始化数据
			initData() {

				this.selectDefalutNum = 0
				// this.belongingArea = this.provices[this.selectDefalutNum].city[0].county
				this.belongingArea = this.provices[this.selectDefalutNum].city

			},

			//删除元素
			removeItem(item) {
				
				//显示的去掉,不是返回的数据
				for (var i = 0; i < this.selectVal.length; i++) {

					if (this.selectVal[i] == item) {
						this.selectVal.splice(i, 1);
						
					}

				}

				this.provices.forEach(item1 => {
					if (item1.name == item) {
						item1.checked = false;
						item1.flag=0
						console.log("-----------------------------------")
						console.log("---------+++++++++++++++------------",item1)
					}
					item1.city.forEach((item2) => {
						if (item2.name == item) {
							item2.checked = false;
							console.log("+++++++++++++++++++",item2.checked)
						}

					})
				})



				this.getAllselectVal()


			},
			//选择全国
			submit2() {

				let datas = {
					"provice": [],
					"city": []
				}
				this.$emit('submit', datas)
			},
			// 提交当前选择
			submit() {
				//let selected = this.getAllselectVal();  
				
				
				// 调用父组件函数
				this.$emit('submit', this.selectDatas)
			},

			selectall(e) {

			},
			changeCity(num) {
				this.isAllcheck = false
				this.selectDefalutNum = num

				// this.belongingArea = this.provices[num].city[0].county
				this.belongingArea = this.provices[num].city
				console.log("+++++++++++++++++++", this.belongingArea)

			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(item, index) {
				
				console.log("0000000000000000",item, index,this.provices[this.selectDefalutNum].city[index].checked)
				if(!this.judgeLength()){
					return
				}
				
				
				item.checked=!item.checked
				this.provices[this.selectDefalutNum].checked=false
				this.provices[this.selectDefalutNum].flag=0
				// this.provices[this.selectDefalutNum].city[index].checked = !this.provices[this.selectDefalutNum].city[index].checked
				// if(this.provices[this.selectDefalutNum].city[index].checked ==true){
				// 	this.provices[this.selectDefalutNum].city[index].checked=false
				// }
				
				// this.provices[this.selectDefalutNum].city[0].county[index].checked = !this.provices[this.selectDefalutNum]
				// 	.city[0].county[index].checked
				// if(this.provices[this.selectDefalutNum].city[0].county[index].checked ==true){
				// 	this.provices[this.selectDefalutNum].checked=false
				// }
				this.getAllselectVal()
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				
				//当数组勾选全部时 全选选中
				this.checkSelectType()
				this.getAllselectVal()

			},
			checkSelectType() {},

			//选择全省
			selectProvice1(item, index) {
				if(!this.judgeLength()){
					return
				}
				item.checked = !item.checked
				console.log("000000000",item, index)
				this.provices[index].checked = item.checked
				
				// this.provices[index].city.forEach((item2) => {
				// 		item2.county.forEach((item3) => {

				// 			item3.checked = false

				// 		})
				// })
				
				
				this.provices[index].city.forEach((item2) => {
						
							item2.checked = false
				
				})

				console.log("this.provices[index].checked", this.provices[index])
				this.getAllselectVal()
			},
			// 判断数组长度是否符合
			judgeLength(){
				// 判断数组长度是否大于3
				if(this.selectVal.length>=3){
					this.$refs.uToast.show({
						message:"最多选择3个省份或城市哦",
						type: 'success'
					})	
					return false
				}else{
					return true 
				}
				
			},
			//获取所有选中的值
			getAllselectVal() {
				

				// 获取所有check为true的选项
				let sendprovicedata = [];
				let citydata = [];
				this.provices.forEach(item => {
					if (item.checked == true) {
						sendprovicedata.push(item.name)
					}
					item.city.forEach((item2) => {
						
						
							if (item2.checked == true) {
								citydata.push(item2.name);
							}
						
						
						// item2.county.forEach((item3) => {

						// 	if (item3.checked == true) {
						// 		citydata.push(item3.areaName);
						// 	}

						// })


					})
				})


				//传递数据给搜索页
				let datas = {
					"provice": sendprovicedata,
					"city": citydata
				}
				this.selectDatas = datas;

				//显示在顶部的已选择的城市
				this.selectVal = [];
				this.selectVal = this.selectVal.concat(datas.provice, datas.city);

				//this.$store.commit('ADD_SELECTCITY', JSON.stringify(datas))

				uni.setStorageSync('ADD_SELECTCITY', JSON.stringify(this.selectDatas))
				return datas;
			},
			dealData(data) {
				if (data.provice.length > 0 || data.city.length > 0) {
					// 将缓存中的相应省份、城市变色
					
					data.provice.forEach(item1 => {
						this.provices.forEach(item2 => {
							if(item1==item2.name){
								item2.checked=true
								item2.flag=1
							}
						})
					})
					
					data.city.forEach(item0=>{
						this.provices.forEach(item1 => {
							
							item1.city.forEach((item2) => {
								item2.county.forEach((item3) => {
						
									if (item0==item3.areaName) {
										item3.checked == true
									}
						
								})
						
						
							})
						})
					})
					
					
					this.getAllselectVal()
					

					// for (let item of this.provices) {
					// 	for (let m of data.provice) {
					// 		if (item.areaCode == m.areaCode) {
					// 			item.checked = m.checked

					// 		}
					// 	}
					// }
					// for(let i=0;i<this.provices.length;i++){
					// 	let citys = this.provices[i].children ; //第二级
					// 	citys.forEach((item,index)=>{
					// 		for (let m of data.city) {
					// 			if (item.areaCode == m.areaCode) {
					// 				item.checked = m.checked 
					// 			}
					// 		}
					// 	})
					// }
					
					//初始化
					this.selectVal =[]
					this.selectVal = this.selectVal.concat(data.provice, data.city);
					// console.info("长度",this.selectVal.length);
				}else{
					// this.defalutData()
				} 
			},
			//清空所有的选择项
			defalutData() {
				for (let item of this.provices[this.selectDefalutNum].children) {
					item.checked = false
					item.disabled = false
				}
			}
		}

	}
</script>

<style scoped lang="scss">
	.navbar-right {

		display: flex;
	}

	.city-content {

		width: 100%;
		background: #ffffff;


	}

	.selected {

		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
		font-size: 30rpx;
		padding: 10rpx;

		view {
			min-width: 140rpx;
			text-align: center;
			margin: 5rpx;
			background-color: $color;
			color: aliceblue;
			border-radius: 10rpx;
		}
	}

	.content-box {

		width: 100%;
		display: flex;
		justify-content: space-between;


	}

	.content-left {

		width: 280rpx;
		height: auto;
		background: #ffffff;
		border-right: 1px solid #f0f0f0;
	}

	.content-right {
		margin-left: 10rpx;
		width: 420rpx;
		height: auto;
		background: #ffffff;
	}

	.city-name {
		width: 100%;
		text-align: center;
		padding: 20rpx 0rpx;
		color: #595959;
		font-size: 28rpx;
		display: flex;
	}

	.city-name text {
		display: block;
		width: 100%;
		height: 100%;
		text-align: center;
	}

	.acitvieColor {
		color: #0B67F1;
	}

	.acitvieColor text {
		color: #0B67F1;
	}

	.acitiveTxt {
		color: #0B67F1;
	}

	.city-name-select text {
		width: auto;
	}

	.city-name-select {
		display: flex;
		justify-content: space-around;
	}

	/deep/ .u-checkbox {
		display: inline-block !important;
		width: 100% !important;
		height: 96rpx;
		line-height: 96rpx;
		justify-content: space-evenly;

	}

	/deep/.u-checkbox__label {
		float: left;
		height: 96rpx;
		line-height: 96rpx;
		margin-left: 40rpx !important;
	}

	/deep/.u-checkbox__icon-wrap {
		float: right;
		height: 96rpx;
		line-height: 96rpx;
		margin-right: 30rpx;
		margin-top: 31rpx;
	}

	.zb_icon2 {
		width: 40rpx;
		height: 34rpx;
		margin: 5rpx;
		margin-right: 50rpx;
	}
</style>
